<template>
  <div id="my-collect">
    <div class="top-back-wrapper">
      <v-top-back siteName="Vue-CN-Node社区 我的收藏" ref="topBack"></v-top-back>
    </div>
    <div class="scroll-wrapper">
      <v-scroll v-if="data" ref="scroll" @reFresh="refresh"
                :data="data"
                :pulldown=true
                :scrolltop=true
                :probe-type="probeType"
                :listen-scroll="listenScroll">
        <div class="item-list">
          <v-topics-item :data="data" :close="true" @itemClose="close"></v-topics-item>
        </div>
      </v-scroll>
    </div>
    <v-no-login v-if="!isLogin"></v-no-login>
    <v-confirm v-model="showConfirm" title="操作提示" text="确认取消收藏该话题吗？" @confirm="toCancel"></v-confirm>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopBack from 'components/top-back/top-back'
  import NoLogin from 'components/no-login/no-login'
  import TopicsItem from 'components/topics-item/topics-item'
  import Confirm from 'base/confirm/confirm'
  import {trim} from 'common/js/util'
  import {checkLogin, Alert, isLogin, Loading} from 'common/js/mixin'
  import {mapGetters, mapActions} from 'vuex'
  import Scroll from 'base/scroll/scroll'

  export default {
    name: 'my-collect',
    mixins: [checkLogin, isLogin, Alert, Loading],
    data() {
      return {
        data: [],
        showConfirm: false,
        id: null
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'myCollect'
      ])
    },
    created() {
      this.probeType = 2
      this.listenScroll = true
      this._getMyCollect()
    },
    mounted() {
      this.$nextTick(() => {
        if (this.$refs.scroll) {
          this.$refs.scroll.refresh()
        }
      })
    },
    methods: {
      close(id) {
        this.id = id
        this.showConfirm = true
      },
      toCancel() {
        this._checkLogin().then((res) => {
          if (res === true) {
            this.cancelCollect({
              'id': this.id,
              'token': trim(this.userInfo.user_token)
            }).then((res) => {
              if (res.success === true) {
                this.showAlert({
                  content: '已取消收藏'
                })
              }
            })
          }
        })
      },
      refresh() {
        this._getMyCollect().then((res) => {
          if (res === true) {
            this.refreshOver(res)
          }
        })
      },
      refreshOver(status) {
        if (this.$refs.scroll) {
          this.$refs.scroll.refreshOver(status)
        }
      },
      _getMyCollect() {
        this.showLoading({})
        return this.getMyCollect({
          'loginname': this.userInfo.loginname
        }).then((res) => {
          if (this.$refs.scroll) {
            this.$refs.scroll.scrolltoTop(0)
          }
          this.closeLoading()
          if (res.success === true) {
            this.data = res.data
            return true
          } else {
            return false
          }
        })
      },
      ...mapActions([
        'getMyCollect',
        'cancelCollect'
      ])
    },
    watch: {
      myCollect(val) {
        this.data = val
      }
    },
    activated() {
      this._getMyCollect()
    },
    components: {
      'v-top-back': TopBack,
      'v-no-login': NoLogin,
      'v-topics-item': TopicsItem,
      'v-scroll': Scroll,
      'v-confirm': Confirm
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #my-collect {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    .scroll-wrapper {
      position: absolute;
      left: 0;
      right: 0;
      top: 45px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      background-color: #eff2f7;
      > div {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
      }
      .item-list {
        padding: 5px;
        box-sizing: border-box;
      }
      .refresh {
        position: absolute;
        left: 0;
        top: -30px;
        width: 100%;
        text-align: center;
        font-size: $font-size-medium;
        color: #666666;
        height: 20px;
        line-height: 20px;
        i {
          margin-right: 10px;
        }
        &.load {
          bottom: 0;
          position: static;
          height: 50px;
          line-height: 50px;
        }
      }
    }
  }
</style>
